import React from "react";
import Link from "next/link";
import Image from "next/image";
// 这是服务器端的代码
const loadDataFormMHY = async () => {
  console.log("loadDataFormMHY");
  const res = await fetch(
    "https://api-mall.mihoyogift.com/common/homeishop/v1/goods/search_goods_spu_list?limit=40&page=1&shop_code=dby&order_by=comprehensive&show_sale_type=1&hide_sold_out=false"
  );
  return await res.json();
};

async function ListPage() {

  const myData = await loadDataFormMHY();
  console.log(myData);

  return (
    <div className=" text-red-600 list-page">
      this is List page
      <ul>

        {myData.data.list.map((item) => {
          return (
            <li key={item.goods_id}>
              <Link href={`/list/${item.goods_id}?name=${item.name}`}>
                {item.name}
                <Image src={item.cover_url} width={50} height={50} />
                Price :{item.price}
              </Link>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default ListPage;
